<template>
    <div class="home">
        <div class="content">
            <!-- 头部 -->
            <div class="header">
                <div class="text">外卖</div>
                <div class="location">
                    <van-icon name="location" />
                    <span>东北石油大学</span>
                    <van-icon name="arrow" />
                </div>
            </div>
            <!-- 主要内容 -->
             <div class="main">
                <div class="main_bg">
                    <div class="search">
                        <input type="text">
                        <div class="search_text">搜索</div>
                    </div>
                   <!-- 分类 -->
                     <div class="classify">
                         <!-- 大分类 -->
                        <div class="big_classify">
                            <div v-for="(item,index) in data.big_classify" :key="index">
                                <svg class="icon" aria-hidden="true">
                                    <use :xlink:href="`#${item.icon}`"></use>
                                </svg>
                                {{ item.name }}
                            </div>
                        </div>
                        <!-- 小分类 -->
                        <div class="small_classify">
                             <div v-for="(item,index) in data.small_classify" :key="index">
                                <svg class="icon" aria-hidden="true">
                                    <use :xlink:href="`#${item.icon}`"></use>
                                </svg>
                                {{ item.name }}
                            </div>
                        </div>
                     </div>
                     <!-- tab选项卡 -->
                    <van-tabs v-model:active="active" color="#ffc400" >
                        <van-tab v-for="(item,index) in data.centent_nav_list" :key="index" :title="item.tab">
                            <Store :store_list="item.data"></Store>
                        </van-tab>
                    </van-tabs>
                </div>
             </div>
        </div>
        
    </div>
    <Footer></Footer>
</template>

<script setup>
import { reactive } from 'vue';
import Footer from '../../components/Footer.vue';
import Store from './components/Store.vue';
let data = reactive({
    big_classify: [
        { name: "美食", icon: "icon-apple-and-pear" },
        { name: "甜点饮品", icon: "icon-tianpin" },
        { name: "超市便利", icon: "icon-chaoshi" },
        { name: "生鲜果蔬", icon: "icon-shuiguo" },
        { name: "滴团买药", icon: "icon-yaopin" },
    ],
    small_classify: [
        { name: "午餐", icon: "icon-iconfonttubiaozhizuo-1" },
        { name: "买酒", icon: "icon-iconfonttubiaozhizuo-" },
        { name: "新鲜水果", icon: "icon-iconfonttubiaozhizuo-9" },
        { name: "汉堡披萨", icon: "icon-iconfonttubiaozhizuo-6" },
        { name: "休闲饮品", icon: "icon-iconfonttubiaozhizuo-8" },
        { name: "夜宵", icon: "icon-iconfonttubiaozhizuo-3" },
        { name: "吐司", icon: "icon-iconfonttubiaozhizuo-5" },
        { name: "跑腿", icon: "icon-paotuiAPP" },
        { name: "美人佳丽", icon: "icon-iconfonttubiaozhizuo-2" },
        { name: "全部分类", icon: "icon-fenlei" },
    ],
    centent_nav_list: [
        {
          tab: "天天神券",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
              title: "隆江猪脚饭",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "减配送费",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "点评高分",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "会员满减",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
      ],

})
</script>

<style scoped lang="less">
.home{
    height:calc(100% - 60px);
    width:100%;
    display: flex;
    flex-flow: column;
   .content{
        flex:1;
        overflow-y: auto;
        .header{
            background-image: linear-gradient(#ffc400,#fff);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:20px 20px 40px 20px;
            .text{
                font-size: 20px;
                font-weight: 600;
            }
            .location{
                span{
                    margin:0 5px;
                }
                font-size: 16px;
            }
        }
        .main{
            margin-top:-20px;
            .main_bg{
                padding:10px 20px 0 20px;
                border-radius: 30px 30px 0 0;
                background-color: #fff;
                .search{
                    position: relative;
                    width:100%;
                    input{
                        width:100%;
                        border:1px solid #ffc400;
                        outline: none;
                        border-radius: 20px;
                        height:30px;
                    }
                    .search_text{
                        position: absolute;
                        background-color: #ffc400;
                        color:#fff;
                        width:80px;
                        text-align: center;
                        line-height: 30px;
                        border-radius: 20px;
                        font-size:14px;
                        top:4px;
                        right:-5px;
                    }
                }
                .classify{
                    font-size: 14px;
                }
                .big_classify{
                    padding:20px 0;
                    display: flex;
                    font-weight: 800;
                    div{
                        flex:1;
                        display: flex;
                        justify-content: center;
                        flex-flow: column;
                        align-items: center;
                        .icon{
                            width: 50px;
                            height:50px;
                            margin-bottom:5px;
                        }
                    }
                }
                .small_classify{
                    display: flex;
                    flex-wrap: wrap;
                    div{
                        width:20%;
                        display: flex;
                        justify-content: center;
                        margin-bottom:15px;
                        align-items: center;
                        flex-flow: column;
                        .icon{
                            width: 30px;
                            height:30px;
                            margin-bottom:5px;
                        }
                    }
                }

            }
        }
   }
}
</style>
